<template>
  <div>
    <h1>【aty-show-more】 component demo</h1>
    <p>【aty-show-more】 本质,注：当默认高度大于实际内容高度时，不显示下面的展开/收起内容</p>
    <aty-row class="fd-show-more-box">
      <aty-row>
        <aty-title :level="4">1.【aty-show-more】 基础使用 </aty-title>
        <aty-panel>defaultHeight 设置默认的高，默认设置了30</aty-panel>
        <aty-show-more class="fd-demo1" :defaultHeight="30">
          <aty-panel v-for="(item,index) in data" :key="item" text="测试数据" />
        </aty-show-more>
      </aty-row>

      <aty-row class="fd-demo2">
        <aty-title :level="4">2.【aty-show-more】 带边框 </aty-title>
        <aty-panel>border属性设置是否实现边框</aty-panel>
        <aty-show-more border :defaultHeight="48">
          <aty-panel v-for="(item,index) in data" :key="item" text="测试数据" />
        </aty-show-more>
      </aty-row>

      <aty-row class="fd-demo3">
        <aty-title :level="4">3.【aty-show-more】 自定trigger </aty-title>
        <aty-panel>内容通过 slot="trigger"</aty-panel>
        <aty-show-more @toggle="toggle" border>
          <aty-panel v-for="(item,index) in data" :key="item" text="测试数据" />
          <aty-button type="primary" slot="trigger" :text="text" />
        </aty-show-more>
      </aty-row>

      <aty-row class="fd-demo4">
        <aty-title :level="4">4.【aty-show-more】 更新数据必须触发update </aty-title>
        <aty-panel>不调用update方法不能计算真是内容高</aty-panel>
        <aty-show-more border @ready="ready" name="showMore1">
          <aty-panel v-for="(item,index) in data2" :key="item" text="测试数据" />
        </aty-show-more>
      </aty-row>
    </aty-row>

  </div>
</template>
<script>
export default {
  data () {
    return {
      data: new Array(10),
      data2: new Array(2),
      text: '展开',
      showMore1: null
    }
  },
  methods: {
    toggle (flag) {
      this.text = flag ? '收起' : '展开'
      console.log(flag)
      console.log(this.text)
    },
    ready (_this) {
      this[_this.name] = _this
    }
  },
  mounted () {
    setTimeout(() => {
      this.data2 = new Array(15)
      // 等dom 插入后更新
      this.$nextTick(() => {
        // 掉更新方法
        this.showMore1.update()
      })
    }, 3000)
  }
}
</script>

<style   type="text/less"  lang="less">
    .fd-show-more-box {
        text-align: left;
        margin: 20px;
            >.aty-row {
                 margin-bottom: 20px;
             }
     }
    .aty-show-more-body {
        padding: 0 10px;
    }
    .fd-demo1 {

        background-color: #f0f0f0;
        .aty-show-more-body {

            line-height: 30px;
        }
    }

    .fd-demo2 {
        .aty-show-more-body {
            line-height: 48px;
        }
    }

    .fd-demo3 {
        line-height: 30px;
        .aty-show-more-trigger {
            padding: 5px 0;
        }
    }

</style>
